<template>
	<scroll-view scroll-y="true" class="tuik-box">
	  <!-- <view class="p1">{{yuanyList.title}}</view> -->
    <view class="p1" v-if="price.commission > 0">,您的今日免费退款权已用完，本次退款将收取{{price.commission}}%手续费</view>
	  <view class="p2">退款总额</view>
	  <view class="money">￥{{price.refund_fee}}</view>
	  <view class="p2">取消订单后，退款将于24小时内原路退回。</view>
	  <navigator url="/pages/fwb/index?type=tdgz" class="p4 p5">查看退订规则</navigator>
    <view class="p4 p6">退款明细</view>
    <view class="p2">订单金额：<text class="red">￥{{price.refund_fee+price.service_charge}}</text></view>
    <view class="p2">需扣除金额：<text class="red">￥{{price.service_charge}}</text></view>
	  <view class="p4 p6">请选择退订原因</view>
	  <view class="list">
	    <view class="dd" v-for="(item, index) in yuanyList.list" :key="index" @click="getReson(item)" :class="{on:refund_reason === item}">{{item}}</view>
	  </view>
	</scroll-view>
</template>

<script>
	export default {
    props:{
      price:{},
      yuanyList:{}
    },
		data() {
			return {
        refund_reason:''
			}
		},
		created() {
			
		},
		methods: {
			getReson(e){
        this.refund_reason = e;
        this.$emit('getReson',e)
      }
		}
	}
</script>

<style lang="less">
	.tuik-box{
    max-height: 70vh;
    .p1{font-size: 30rpx; margin-bottom: 20rpx;}
    .p2{font-size: 28rpx; color: #777; margin-bottom: 20rpx;}
    .money{font-size: 44rpx; color: red; margin-bottom: 10rpx;}
    .dd{font-size: 28rpx; color: #666; line-height: 30rpx; display: flex; align-items: flex-start; justify-content: space-between; padding: 14rpx 0;}
    .dd::after{content: ''; display: block; width: 26rpx; height: 26rpx; margin-top: 2px; border-radius: 50%; border: 1px solid #ccc; margin-right: 10rpx; box-sizing: border-box;}
    .on.dd::after{border: 6rpx solid #FF6A00;}
    .p4{font-size: 30rpx;  padding: 16rpx 0;}
    .p5{color: #FF6A00;}
    .p6{padding-top: 16rpx; border-top: 1px solid #ddd; color: #333; font-weight: bold;}
    
    .red{color: #FF6A00;}
    .btn10{background-color: #fff !important; border: 1px solid #ddd; color: #333;}
    .btns{display: flex; align-items: center; justify-content: center;}
  }
</style>
